<template>
	<swiper class="swiper-box" :indicator-dots="true" indicator-active-color="#FFFFFF" circular autoplay
	  >
		<block v-for="(item,index) in lists" :key="index">
			<swiper-item class="swiper-item">
				<view class="swiper-item-img" @click="navTo(item.href)">
					<fu-image :src="item.thumb" mode="aspectFill" ></fu-image>
				</view>
			</swiper-item>
		</block>
	</swiper>
</template>

<script>
	export default {
		props: {
			lists: {
				type: Array,
				default () {
					return []
				},
			}
		},
		methods: {
			navTo(path) {
				if (path) {
					this.$urouter.navigateTo(path);
				}
			},

		}
	}
</script>

<style lang="scss">
	.swiper-box {
		height: 386rpx;
		// border-radius: 8rpx;
		overflow: hidden;
		// border-radius: 8rpx;
		/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
		transform: translateY(0);
	}

	.swiper-item-img {
		width: 100%;
		height: 100%;
		background-color: #EEEEEE;
		// border-radius: 16rpx;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
		// border-radius: 16rpx;
	}
</style>
